<template>
	<n-switch size="small" :value="!data.isHide" :loading="loading" @update:value="onChange">
		<template #checked-icon>
			<base-icon name="open-eyes" class="text-primary" />
		</template>
		<template #unchecked-icon>
			<base-icon name="close-eyes" class="text-primary" />
		</template>
	</n-switch>
</template>

<script lang="ts" setup>
import { BaseIcon } from '@/components/base/'
import { NSwitch } from 'naive-ui'
import { PropType } from 'vue'
import { FeedType } from '@/types'
import { setFeedsHide } from '@/api/feed'
import { useRequest, useMessage } from '@/hooks'
import { t } from '@/utils'

const props = defineProps({
	data: {
		type: Object as PropType<FeedType>,
		required: true
	}
})

const message = useMessage()

const { run, loading } = useRequest(setFeedsHide, {
	onSuccess: () => {
		message.success(t(`feed.${props.data.isHide ? 'openSuccess' : 'hideSuccess'}`))
		props.data.isHide = !props.data.isHide
	}
})

const onChange = () => run({ id: props.data.id, isHide: !props.data.isHide })
</script>
